/*低版本浏览器不支持flex布局*/
function reWidth(){
    var num = $('.link-module').length;
    $('.link-module').css({
        'width' : Math.floor( ($('.col-link').width()-20*(num-1))/num)+ 'px'
    });
}
/*最后的加号按钮*/
function newLink(){
    var linkBox =
        '<div class="link-module flipper new-link">' +
        '<div class="module front">' +
        '<section class="module-header">' +
        '<h1></h1>' +
        '<div class="btn-guroup" role="button" >' +
        '<a class="link-set-icon set-btn" onclick="setLink(this)">' +
        '</a>' +
        '</div>' +
        '</section>' +
        '<span class="info-box-text">' +
        '<img class="default-img" src="resources/img/default-img.png">' +
        '<div class="right-part">' +
        '<p>欢迎使用</p>' +
        '<a target="_blank" href="#" class="btn btn-primary"><span></span></a>' +
        '</div>' +
        '</span>' +
        '</div>' +
        '<div class="module back">' +
        '<section class="module-header">' +
        '<h1> <input name="urlName" class="form-control" placeholder="请输入名称"/></h1>' +
        '<div class="btn-guroup" role="button" >' +
        '<span class="icon-btn delete" onclick="deleteLink(this)"></span>' +
        '</div>' +
        '</section>' +
        '<span class="info-box-text">' +
        '<input name="urlLoction" class="form-control" placeholder="请输入网址">' +
        '</span>' +
        '<div class="module-footer">' +
        '<a onclick="saveModule(this)" class="primary">保存</a>' +
        '<a onclick="hidModule($(this))">取消</a>' +
        '</div>' +
        '</div>' +
        '</div>';
    return linkBox;
}
/* 查询 */
$(function () {
    $.post(CUSTOM_SERVICE_URL + "quickUrl/queryQuickUrl", function (data) {
        if (data.status == 'SUCCESS') {
            var $quickUrlContainer = $('#quickUrlContainer');
            var quickUrlHtml =
                '<div class="link-module flipper new-link">' +
                '<div class="module front">' +
                '<section class="module-header">' +
                '<h1>{urlName}</h1>' +
                '<div class="btn-guroup" role="button" >' +
                '<a class="link-set-icon set-btn" onclick="setLink(this)">' +
                '</a>' +
                '</div>' +
                '</section>' +
                '<span class="info-box-text">' +
                '<img class="default-img" src="resources/img/default-img.png">' +
                '<div class="right-part">' +
                '<p>欢迎使用</p>' +
                '<a target="_blank" href="{urlLoction}" class="btn btn-primary"><span>{urlName}</span></a>' +
                '</div>' +
                '</span>' +
                '</div>' +
                '<div class="module back">' +
                '<section class="module-header">' +
                '<h1><input name="urlName" class="form-control"  id="urlName"></h1>' +
                '<div class="btn-guroup" role="button" >' +
                '<span class="icon-btn delete" onclick="deleteLink(this)"></span>' +
                '</div>' +
                '</section>' +
                '<span class="info-box-text">' +
                '<input name="urlLoction" class="form-control" id="urlLoction">' +
                '</span>' +
                '<div class="module-footer">' +
                '<a onclick="saveModule(this)" class="primary">保存</a>' +
                '<a onclick="hidModule($(this))">取消</a>' +
                '</div>' +
                '</div>' +
                '</div>';
            $.each(data.body, function (index, quickUrl) {
                var $quick = $(
                    quickUrlHtml.replaceAll('{urlName}', quickUrl.urlName)
                        .replace('{urlLoction}', quickUrl.urlLoction)
                );
                $quick.attr("flag", "update");
                $quick.attr("urlLoction", quickUrl.urlLoction);
                $quick.attr("urlName", quickUrl.urlName);
                $quick.attr("id", quickUrl.id);
                $quickUrlContainer.append($quick);
            });
        }
        if ($('.link-module').length < 4) {
            $('.col-link .task-row').append(newLink());
            $('.col-link .task-row .link-module:last-of-type').append(
                '<div class="module front addLinkBtn">' +
                '<span class="icon-btn add" onclick="addLink(this)" />' +
                '</div>'
            );
        }
        reWidth();
    });
});
/* 新增模块 */
function addLink(obj) {
    var $linkBox = $(obj).parents('.link-module');
    var count = $('.link-module').length;
    if (count == 3) {
        var $addBox = $(newLink());

        $addBox.attr("flag", "add");

        $linkBox.before($addBox);
        reWidth();
        $addBox.addClass('is-selected addLinkModule');

    } else if (count == 4) {
        $linkBox.attr("flag", "add");
        setLink(obj);
    }

}

/*保存修改*/
function saveModule(obj) {
    //$this当前保存超链接对象
    var $this = $(obj);
    //当前单个元素
    var $_linkBox = $this.parents('.link-module');

    var urlLoction = $_linkBox.find('input[name=urlLoction]').val();
    var urlName = $_linkBox.find('input[name=urlName]').val();

    if (urlName === '' || urlLoction === '') {
        showMsg("warn", "请输入名称和地址！");
        return;
    }
    if(urlLoction){
        var urlLoction = urlLoction.substr(0,7).toLowerCase()=="http://"?urlLoction:"http://"+urlLoction;
        var Expression =/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
        if(!Expression.exec(urlLoction)){
            showMsg("warn", "请规范输入网址！");
            return;
        }
    }

    //判断当前元素状态:更新,新增
    var flag = $_linkBox.attr("flag");
    if ('add' == flag) {
        $.post(CUSTOM_SERVICE_URL + 'quickUrl/addQuickUrl', {
            'newUrlLoction': urlLoction,
            'newUrlName': urlName
        }, function (data) {
            if (data.status == 'SUCCESS') {
                if($_linkBox.find('.addLinkBtn') != 0){
                    $_linkBox.find('.addLinkBtn').remove();
                }
                $_linkBox.removeClass('is-selected addLinkModule');
                $_linkBox.find("input[name=urlLoction]").attr("href", urlLoction);
                $_linkBox.find("h1[name=urlHeader]").html(urlName);
                $_linkBox.find("input[name=urlName]").html(urlName);
                $_linkBox.attr('id', data.body);
                $_linkBox.attr("urlLoction", urlLoction);
                $_linkBox.attr("urlName", urlName);

                //赋值页面信息
                $_linkBox.find(".module.front .module-header h1").html(urlName);
                $_linkBox.find(".module.front .info-box-text .right-part span").html(urlName);
                $_linkBox.find(".module.front .info-box-text .right-part a").attr("href", urlLoction);
            } else {
                showMsg("warn", "操作失败！");
            }
        });
    } else if ('update' == flag) {
        var url = CUSTOM_SERVICE_URL + "quickUrl/updateQuickUrl";
        var urlName = $("#urlName").val();
        var urlLoction = $("#urlLoction").val();
        $.post(url, {
            'id': $_linkBox.attr('id'),
            'urlLoction': urlLoction,
            'urlName': urlName
        }, function (data) {
            if (data.status == 'SUCCESS') {
                $_linkBox.find("input[name=urlLoction]").attr("href", urlLoction);
                $_linkBox.find("h1[name=urlHeader]").html(urlName);
                $_linkBox.find("input[name=urlName]").html(urlName);
                $_linkBox.removeClass('is-selected addLinkModule');
                $_linkBox.attr('id', data.body);
                $_linkBox.attr("urlLoction", urlLoction);
                $_linkBox.attr("urlName", urlName);
                //修改后页面赋值
                $_linkBox.find(".module.front .module-header h1").html(urlName);
                $_linkBox.find(".module.front .info-box-text .right-part span").html(urlName);
                $_linkBox.find(".module.front .info-box-text .right-part a").attr("href", urlLoction);
            } else {
                showMsg("warn", "操作失败！");
            }
        });
    }
}

/*修改链接*/
function setLink(obj) {
    var $_linkBox = $(obj).parents('.link-module');
    $_linkBox.find('input[name=urlLoction]').val($_linkBox.attr('urlLoction'));
    $_linkBox.find('input[name=urlName]').val($_linkBox.attr('urlName'));
    $_linkBox.addClass('is-selected');
}

/*点击取消*/
function hidModule(obj) {
    var $this = $(obj);
    var $_linkBox = $this.parents('.link-module');
    if ($_linkBox.hasClass('addLinkModule')) {
        $_linkBox.remove();
        reWidth();
    }else{
        $_linkBox.removeClass('is-selected');
    }
}


/*删除模块*/
function deleteLink(obj) {
    var $_linkBox = $(obj).parents('.link-module');
    $.post(CUSTOM_SERVICE_URL + "quickUrl/delQuickUrl", {'quickUrlId': $_linkBox.attr('id')});
    var count = $('.link-module').length;
    if (count <= 4 && $('.link-module .addLinkBtn').length == 0) {
        $('.col-link .task-row').append(newLink());
        $('.col-link .task-row .link-module:last-of-type').append(
            '<div class="module front addLinkBtn">' +
            '<span class="icon-btn add" onclick="addLink(this)" />' +
            '</div>'
        );
        $_linkBox.remove();
        reWidth();
    }else if($_linkBox.find(' .addLinkBtn').length != 0){
        hidModule(obj);
    }else{
        $_linkBox.remove();
        reWidth();
    }

}

